<template>
    <div class="container">
        <div class="echarts-box">
            <div id="myEcharts" style="min-height: 800px; height: 100%; width: 100%"></div>
        </div>
        <div class="btn-box">
            <el-button type="danger" class="func-btn" @click="openDataDialog">全部数据</el-button>
            <el-button type="success" class="func-btn">导入excel</el-button>
        </div>
        <div class="table-box">
            <el-select v-model="selectedData" @change="provinceChange" placeholder="请选择省份" style="width:100%">
                <el-option v-for="(item, index) in data" :key="index" :value="item" :label="item.name"></el-option>
            </el-select>
            <div>
                <div class="table-item">
                    <div class="table-label">前期</div>
                    <div class="table-value">{{ currentTableData.qianqi }}</div>
                </div>
                <div class="table-item">
                    <div class="table-label">立项</div>
                    <div class="table-value">{{ currentTableData.lixiang }}</div>
                </div>
                <div class="table-item">
                    <div class="table-label">投决</div>
                    <div class="table-value">{{ currentTableData.toujue }}</div>
                </div>
                <div class="table-item">
                    <div class="table-label">在建</div>
                    <div class="table-value">{{ currentTableData.zaijian }}</div>
                </div>
                <div class="table-item">
                    <div class="table-label">并网</div>
                    <div class="table-value">{{ currentTableData.bingwang }}</div>
                </div>
            </div>
        </div>

        <!-- 数据弹窗-->
        <el-dialog v-model="editDataDialog.open" title="全部数据" draggable width="50%">
            <template #header="{ titleId, titleClass }">
                <div class="my-header">
                    <span :id="titleId" :class="titleClass">全部数据</span>
                    <el-button type="danger" @click="addData" style="margin-right: 50px;">添加数据</el-button>
                </div>
            </template>
            <div>
                <el-table :data="data" :border="true" height='100%' show-summary sum-text="合计" style="width: 100%">
                    <el-table-column prop="name" label="省份" />
                    <el-table-column prop="qianqi" label="前期" sortable />
                    <el-table-column prop="lixiang" label="立项" sortable />
                    <el-table-column prop="toujue" label="投决" sortable />
                    <el-table-column prop="zaijian" label="在建" sortable />
                    <el-table-column prop="bingwang" label="并网" sortable />
                    <el-table-column prop="value" label="合计" sortable />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
                                删除数据
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>

        <!-- 数据弹窗-->
        <el-dialog v-model="addDataItem.open" title="添加数据" draggable width="400px">
            <div>
                <el-form :label-position="Left" label-width="100px" :model="addDataItem.form" style="max-width: 360px">
                    <el-form-item label="省份：">
                        <el-select v-model="addDataItem.form.name" placeholder="请选择省份">
                            <el-option v-for="(item, index) in provinceList" :key="index" :value="item"
                                :label="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="前期：">
                        <el-input v-model="addDataItem.form.qianqi" type="number" />
                    </el-form-item>
                    <el-form-item label="立项：">
                        <el-input v-model="addDataItem.form.lixiang" type="number" />
                    </el-form-item>
                    <el-form-item label="投决：">
                        <el-input v-model="addDataItem.form.toujue" type="number" />
                    </el-form-item>
                    <el-form-item label="在建：">
                        <el-input v-model="addDataItem.form.zaijian" type="number" />
                    </el-form-item>
                    <el-form-item label="并网：">
                        <el-input v-model="addDataItem.form.bingwang" type="number" />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="success" @click="sureAddData">确认数据</el-button>
                </span>
            </template>
        </el-dialog>


    </div>
</template>
  
<script>
import * as echarts5 from 'echarts';
import china from '../../assets/china.json'

export default {
    data() {
        return {
            myEcharts: null,
            mapName: 'china',
            selectedData: '',
            currentTableData: { qianqi: 0, lixiang: 0, toujue: 0, zaijian: 0, bingwang: 0, value: 0 },//当前选中的数据
            editDataDialog: {
                open: false
            },
            addDataItem: {
                open: false,
                form: {}
            },
            data: [
                //前期、立项、投决、在建、并网
            ],
            geoCoordMap: {},
            provinceList: []
        }
    },
    created() {
        const that = this
        that.myEcharts = echarts5
        echarts5.registerMap('china', china) //这个特别重要
        setTimeout(() => {
            var mapFeatures = that.myEcharts.getMap(that.mapName).geoJson.features;
            mapFeatures.forEach(function (v) {
                // 地区名称
                var name = v.properties.name;
                // 地区经纬度
                that.geoCoordMap[name] = v.properties.cp;
                that.provinceList.push(name)
            });
            that.initChart();
        }, 500)
    },
    methods: {
        //开始继续数据修改
        openDataDialog() {
            this.editDataDialog.open = true
        },
        //删除一行数据
        deleteRow(index) {
            this.data.splice(index, 1)
            this.initChart();
        },
        // 添加一行数据
        addData() {
            this.addDataItem.open = true
            this.addDataItem.form = { qianqi: 0, lixiang: 0, toujue: 0, zaijian: 0, bingwang: 0, value: 0 }
        },
        sureAddData() {
            this.addDataItem.form.value = Number(this.addDataItem.form.qianqi)
                + Number(this.addDataItem.form.lixiang) + Number(this.addDataItem.form.toujue)
                + Number(this.addDataItem.form.zaijian) + Number(this.addDataItem.form.bingwang);
            //然后讲数据压入实际数据中
            this.data.push(this.addDataItem.form);
            this.initChart();
            this.addDataItem.open = false
        },

        //数据转定位
        convertData(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = this.geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value),
                    });
                }
            }
            return res;
        },
        //当前定位
        currentDataPosition(data) {
            var res = [];
            var geoCoord = this.geoCoordMap[data.name];
            if (geoCoord) {
                res.push({
                    name: data.name,
                    value: geoCoord.concat(data.value),
                });
            }
            return res;
        },
        provinceChange(value) {
            this.currentTableData = value
            this.initChart()
        },

        initChart() {
            const that = this
            let chart = that.myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
            chart.setOption({
                visualMap: {
                    show: false,
                    min: 0,
                    max: 200,
                    left: '10%',
                    top: 'bottom',
                    calculable: true,
                    seriesIndex: [1],
                    inRange: {
                        color: ['#04387b', '#467bc0'] // 蓝绿
                    }
                },
                geo: {
                    show: true,
                    map: that.mapName,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                        }
                    },
                    roam: false,
                    itemStyle: {
                        normal: {
                            areaColor: '#023677',
                            borderColor: '#1180c7',
                        },
                        emphasis: {
                            areaColor: '#4499d0',
                        }
                    }
                },
                series: [{
                    name: '散点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: that.convertData(that.data),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#fff'
                        }
                    }
                },
                {
                    type: 'map',
                    map: that.mapName,
                    geoIndex: 0,
                    aspectScale: 0.75, //长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#031525',
                            borderColor: '#3B5077',
                        },
                        emphasis: {
                            areaColor: '#2B91B7'
                        }
                    },
                    animation: false,
                    data: that.data
                },
                {
                    name: 'Top 5',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: that.convertData(that.data.sort(function (a, b) {
                        return b.value - a.value;
                    }).slice(0, 20)),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'left',
                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'yellow',
                            shadowBlur: 10,
                            shadowColor: 'yellow'
                        }
                    },
                    zlevel: 1
                },
                {
                    name: 'Current',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    data: that.currentDataPosition(that.currentTableData),
                    symbolSize: function (val) {
                        return val[2] / 10;
                    },
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    itemStyle: {
                        normal: {
                            color: 'red',
                            shadowBlur: 10,
                            shadowColor: 'red'
                        }
                    },
                    zlevel: 3
                },
                ]
            });
            window.onresize = function () {
                chart.resize();
            };
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    height: 100vh;
    background-color: rgb(29, 29, 29);
}

.btn-box {
    position: absolute;
    top: 200px;
    left: 100px;

    .func-btn {
        opacity: 0.01;
    }

    .func-btn:hover {
        opacity: 1;
    }
}

.echarts-box {
    background-color: rgb(29, 29, 29);
}

.table-box {
    color: white;
    max-height: 30vh;
    width: 240px;
    position: absolute;
    right: 150px;
    top: 500px;
    text-align: center;
    padding: 15px;
    border-radius: 25px;
    box-shadow: 0 0.1px 0.7px rgba(233, 30, 99, 0.141), 0 0.1px 1.7px rgba(233, 30, 99, 0.202), 0 0.3px 3.1px rgba(233, 30, 99, 0.25), 0 0.4px 5.6px rgba(233, 30, 99, 0.298), 0 0.8px 10.4px rgba(233, 30, 99, 0.359), 0 2px 25px rgba(233, 30, 99, 0.5);
}

.table-item {
    display: flex;
    line-height: 40px;
    justify-content: end;

    .table-label {
        font-size: 20px;
        font-weight: bold;
        width: 50%;
    }

    .table-value {
        font-size: 26px;
        width: 50%;
    }
}

.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
</style>